<template>
  <view class="body flex flex-row">
    <view class="card flex flex-row" :style="{marginLeft:marginLeft+'rpx'}" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend">
      <view class="imageBox">
        <image :src="goods.image" />
      </view>
      <view class="content">
<!--        <span class="redDot" v-if="goods.giftPromotionInfoList">促</span>-->
        <view class="goodsName">{{ goods.goodsName }}</view>
        <view>{{ goods.boxNum }}{{ goods.boxUnitName }}{{ goods.mainNum }}{{ goods.mainUnitName}}</view>
        <view class="priceBox">
          <view><span class="price">{{ (goods.billTaxAmount || goods.taxAmount).toFixed(2) }}</span></view>
        </view>
      </view>
      <view class="selected flex a-item j-content" v-if="updateNum" @click="selectGoods">
        选规格
      </view>
    </view>
    <view class="remove flex a-item j-content" @tap="del">删除</view>
  </view>
</template>

<script>

export default {
  name: "goodsCard",
  props:{
    goods:{
      type: Object,
      default: {}
    },
    updateNum:{
      type:Boolean,
      default: true
    },
    index:{
      type:Number,
      default: -1
    },
  },
  data(){
    return{
      image:'https://www.zjjqf.cn/file/static/undefined.png',
      marginLeft: 10, //上限170
      x:0,
      left: false
    }
  },
  created() {
    if(this.goods.imageUrl) {
      this.getImage(this.goods.imageUrl)
    }else {
      this.goods.image = this.image
    }
  },
  methods:{
    getImage(url){
      const list = JSON.parse(url)
      if (list.length){
        this.goods.image = list[0].path
      }else {
        this.goods.image = this.image
      }

    },
    del(){
      this.$emit('del',this.index)
    },
    selectGoods(){
      this.$emit('selectGoods',this.goods)
      this.$emit('update:currentIndex',this.index)
    },
    touchstart(e){
      const touch = e.touches[0] || e.changedTouches[0]
      this.x = touch.clientX
    },
    touchmove(e){
      if (!this.updateNum)return
      const touch = e.touches[0] || e.changedTouches[0]
      const marginLeft = (touch.clientX - this.x) >> 0
      if (this.left){
        if (marginLeft < 0){
          this.marginLeft =  -150
        }else if (marginLeft > 160){
          this.marginLeft = 10
        }else {
          this.marginLeft = -150 + marginLeft
        }
      }else {
        if (marginLeft < -150){
          this.marginLeft =  -150
        }else if (marginLeft > 10){
          this.marginLeft = 10
        }else {
          this.marginLeft = marginLeft
        }
      }

    },
    touchend(e){
      if (this.marginLeft < -75){
        this.marginLeft =  -150
        this.left = true
      }else {
        this.marginLeft = 10
        this.left = false
      }
    },

  }
}
</script>

<style lang="scss" scoped>
.card{
  padding-top: 20rpx;
  margin: 10rpx 2%;
  border-radius: 30rpx;
  background: #ffffff;
  min-height: 250rpx;
  position: relative;
  width: 720rpx;
  transition: margin-left linear 0.1s;
  z-index: 2;
  .imageBox{
    width: 35%;
    padding-left: 20rpx;
    margin-right: 20rpx;
    image{
      width: 180rpx;
      height: 180rpx;
      border-radius: 20rpx;
    }
  }
  .content{
    width: 60%;
    position: relative;
    .goodsName{
      font-family: PingFangSC;
      font-size: 34rpx;
      min-height: 120rpx;
    }
    .priceBox {
      font-size: 25rpx;
      font-family: PingFang SC;
      .price {
        &:before {
          content: '￥';
          font-size: 35rpx;
          font-weight: 500;
        }
        color: red;
        font-size: 40rpx;
        font-weight: 600;
      }
    }
  }
}
.selected{
  width: 100rpx;
  height: 50rpx;
  position: absolute;
  background: red;
  color: #ffffff;
  border-radius: 15rpx;
  right: 30rpx;
  bottom: 50rpx;
  font-weight: 600;
  font-size: 26rpx;
}
.redDot{
  border: red 1px solid;
  background: #ffffff;
  display: flex;
  justify-content: center;
  border-radius: 30rpx;
  width: 30rpx;
  height: 30rpx;
  color: red;
  font-size: 20rpx;
  font-weight: lighter;
  position: absolute;
  right: 0;
  top: 10rpx;
}
.body{
  width: 100%;
  overflow: hidden;
  position: relative;
}
.remove{
  position: absolute;
  z-index: 1;
  width:150rpx;
  height: 250rpx;
  right: 10rpx;
  background: red;
  color: #ffffff;
  margin: 10rpx 2% 0 0;
  border-radius: 30rpx;
}
</style>
